<template>
	<view class="wrap">
		<!-- 编辑状态 -->
		<view class="box-detail">
			<view class="box-detail-content">
				<uni-forms ref="form" :rules="rules" :value="formData">

					<uni-forms-item name="NAME" required label="企业名称">
						<uni-easyinput type="text" v-model="formData.NAME" placeholder="请输入企业名称" @tap="toCompanyList"
							:styles="inputStyle" disabled suffixIcon="arrowright">
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="ENTERPRISE_TYPE" label="企业类型">
						<picker @change="bindPickerChange" :range="dicData.targetType" range-key="CODE_NAME"
							:value="index" data-key="targetType" class="picker">
							<uni-easyinput type="text" :inputBorder="false" v-model="formData.ENTERPRISE_TYPE"
								suffixIcon="arrowright" :styles="inputStyle" disabled>
							</uni-easyinput>
							<view class="picker-text">
								{{selectData.targetType.value}}
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item name="COMPANY_SIZE" label="企业规模">
						<picker @change="bindPickerChange" :range="dicData.ent_scale" range-key="CODE_NAME"
							:value="index" data-key="ent_scale" class="picker" disabled>
							<uni-easyinput type="text" :inputBorder="false" v-model="formData.COMPANY_SIZE"
								suffixIcon="arrowright" :styles="inputStyle" disabled>
							</uni-easyinput>
							<view class="picker-text">
								{{selectData.ent_scale.value}}
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item name="INDUSTRY" label="行业类别">
						<picker @change="bindPickerChange" :range="dicData.inve_field" range-key="CODE_NAME"
							:value="index" data-key="inve_field" class="picker" disabled>
							<uni-easyinput type="text" :inputBorder="true" v-model="formData.INDUSTRY"
								placeholder="请选择行业类别" suffixIcon="arrowright" :styles="inputStyle" disabled>
							</uni-easyinput>
							<view class="picker-text">
								{{selectData.inve_field.value}}
							</view>
						</picker>
					</uni-forms-item>
					<!-- <uni-forms-item name="NATURE" label="企业性质">
						<picker @change="bindPickerChange" :range="dicData.dwxz" range-key="CODE_NAME" :value="index"
							data-key="dwxz" class="picker" disabled>
							<uni-easyinput type="text" :inputBorder="true" v-model="formData.NATURE"
								placeholder="请选择企业性质" suffixIcon="arrowright" :styles="inputStyle" disabled>
							</uni-easyinput>
							<view class="picker-text">
								{{selectData.dwxz.value}}
							</view>
						</picker>
					</uni-forms-item> -->
					<uni-forms-item name="WEBSITE" label="企业网址">
						<uni-easyinput type="text" :inputBorder="true" v-model="formData.WEBSITE" placeholder="请输入企业网址"
							disabled>
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="ZC_ADDRESS" label="注册地址">
						<uni-easyinput type="text" :inputBorder="true" v-model="formData.ZC_ADDRESS"
							placeholder="请输入注册地址" disabled></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="HEAD_ADDRESS" label="总部地址">
						<uni-easyinput type="text" :inputBorder="true" v-model="formData.HEAD_ADDRESS"
							placeholder="请输入总部地址" disabled></uni-easyinput>
					</uni-forms-item>
					<!-- <uni-forms-item name="TX_ADDRESS" label="通讯地址">
						<uni-easyinput type="text" :inputBorder="true" v-model="formData.TX_ADDRESS"
							placeholder="请输入通讯地址" disabled></uni-easyinput>
					</uni-forms-item> -->
					<uni-forms-item name="EMAIL" label="企业邮箱">
						<uni-easyinput type="text" :inputBorder="true" v-model="formData.EMAIL" placeholder="请输入企业邮箱"
							disabled>
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="BUSINESS_SCOPE" label="经营范围">
						<uni-easyinput type="textarea" autoHeight :inputBorder="true" v-model="formData.BUSINESS_SCOPE"
							placeholder="请输入经营范围" disabled></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="COMPANY_PROFILE" label="企业简介">
						<uni-easyinput type="textarea" autoHeight :inputBorder="true" v-model="formData.COMPANY_PROFILE"
							placeholder="请输入企业简介" disabled></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="PROJ_DEMAND" label="项目需求">
						<uni-easyinput type="textarea" autoHeight :inputBorder="true" v-model="formData.PROJ_DEMAND"
							placeholder="请输入总部地址" disabled></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="PROJ_ANALYSIS" label="项目分析">
						<uni-easyinput type="textarea" autoHeight :inputBorder="true" v-model="formData.PROJ_ANALYSIS"
							placeholder="请输入总部地址" disabled></uni-easyinput>
					</uni-forms-item>
					<!-- <uni-forms-item name="MANAGER" required label="跟进人" @tap="toPersonList">
						<view class="picker">
							<uni-easyinput type="text" autoHeight :inputBorder="true" v-model="formData.MANAGER"
								placeholder="请选择跟进人" suffixIcon="arrowright" :styles="inputStyle" disabled>
							</uni-easyinput>
							<view class="picker-text">
								{{personText}}
							</view>
						</view>
					</uni-forms-item> -->
				</uni-forms>
			</view>
			<view class="box-attach">
				<view class="box-attach-row" @tap="uplaodFile">
					<image src="../../../static/images/icon_enclosure.png" mode="widthFix" class="box-attach-icon">
					</image>
					<text class="box-attach-name">点击追加上传</text>
				</view>
				<view class="box-attach-row" v-for="item,index in FILELIST" :key='index'>
					<image src="../../../static/images/icon_enclosure.png" mode="widthFix" class="box-attach-icon">
					</image>
					<text class="box-attach-name" >{{item.fileShowName}}</text>
				</view>
			</view>
	
			<mix-fixed-bar @leftEvent="handleSave('form')" @rightEvent="handleBack" barType="2" leftText="保存"
				rightText="返回">
			</mix-fixed-bar>
		</view>
	</view>

</template>

<script>
	import mixFixedBar from '../../../components/mix-fixe-bar.vue';
	export default {
		components: {
			mixFixedBar
		},
		data() {
			return {
				isEdit: false,
				formData: {
					NAME: '',
					COMPANY_SIZE: '',
					INDUSTRY: '',
					NATURE: '',
					WEBSITE: '',
					ZC_ADDRESS: '',
					HEAD_ADDRESS: '',
					TX_ADDRESS: '',
					EMAIL: '',
					BUSINESS_SCOPE: '',
					COMPANY_PROFILE: '',
					PROJ_DEMAND: '',
					PROJ_ANALYSIS: '',
					MANAGER: ''
				},
				FILELIST:[],
				newFileList:[],
				personText: '',
				inputStyle: {
					disableColor: '#ffffff',
					borderColor: '#ffffff'
				},
				dicData: {

				},
				rules: {
					NAME: {
						rules: [{
							required: true,
							errorMessage: '企业名称不能为空'
						}]
					}
				},
				selectData: {
					ent_scale: {
						index: 0,
						value: '',
						name: 'COMPANY_SIZE'
					},
					inve_field: {
						index: 0,
						value: '',
						name: 'INDUSTRY'
					},
					dwxz: {
						index: 0,
						value: '',
						name: 'NATURE'
					},
					targetType: {
						index: 0,
						value: '',
						name: 'ENTERPRISE_TYPE'
					}
				},
				index: 0,
				dataKey: ''
			}
		},
		methods: {
			async getDetail() {
				if (this.dataKey) {
					uni.showLoading({

					})
					const res = await this.$req({
						url: `info/busTarget/view.do?dataKey=${this.dataKey}`,
						data: {},
					})
					uni.hideLoading()
					if (res.data.success) {
						if(res.data.attributes.fileList['PPP_T_BUS_ENTERPRISE_INFO.xgfj']&&res.data.attributes.fileList['PPP_T_BUS_ENTERPRISE_INFO.xgfj'].fileList){
							this.FILELIST=res.data.attributes.fileList['PPP_T_BUS_ENTERPRISE_INFO.xgfj'].fileList
						}
						const form = {
							...this.formData
						}
						const pageData = {
							...this.formData,
							...res.data.attributes.model
						}
						this.formData = pageData;
						//picker的回显
						const pickerData = {
							...this.selectData
						};

						const dicData = JSON.parse(uni.getStorageSync('dicData'))
						//公司规模
						pickerData.ent_scale.value = this.$util.queryDicName(dicData, 'ent_scale', pageData
							.COMPANY_SIZE);
						//行业类别
						pickerData.inve_field.value = this.$util.queryDicName(dicData, 'inve_field', pageData
						.INDUSTRY);
						//企业性质
						pickerData.dwxz.value = this.$util.queryDicName(dicData, 'dwxz', pageData.NATURE);
						//企业类型
						pickerData.targetType.value = this.$util.queryDicName(dicData, 'targetType', pageData
							.ENTERPRISE_TYPE);
						this.selectData = pickerData;
					}
				}
			},
			handleSave(form) {
				const self = this;
				this.$refs[form]
					.submit()
					.then(async (res) => {
						console.log('表单的值：', res)
						if (this.dataKey) {
							res.DATAKEY = this.dataKey;
							res.isadding = false;
						}else {
							res.isadding = true
						}
						if(this.newFileList.length){
							res.newAttachId=this.newFileList[0].dataKey
						}
						uni.showLoading({

						})
						const ret = await this.$req({
							url: 'wxinfo/busTarget/save.do',
							data: res
						})
						uni.hideLoading()
						if (ret.data.success) {
							uni.showToast({
								title: '操作成功',
								icon: "success"
							})
							//刷新详情和列表
							uni.$emit("refreshDetail", {});
							uni.$emit("refreshList", {})
							uni.navigateBack({

							})
						} else {
							uni.showToast({
								title: ret.data.messages[0].content
							})
						}
					})
					.catch(errors => {
						console.error('验证失败：', errors)
					})
			},
			handleBack() {
				uni.navigateBack({

				})
			},
			toCompanyList() {
				if (this.dataKey) {
					return;
				}
				uni.navigateTo({
					url: '../../selectList/company'
				})
			},
			toPersonList() {
				uni.navigateTo({
					url: '../../selectList/person'
				})
			},
			bindPickerChange(e) {
				console.log('e', e)
				const key = e.currentTarget.dataset.key;
				const value = e.detail.value;
				const data = {
					...this.selectData
				};
				data[key].index = value;
				data[key].value = this.dicData[key][value].CODE_NAME;
				const formData = {
					...this.formData
				}
				console.log('this.selectData[key].name', this.selectData[key].name)
				formData[this.selectData[key].name] = this.dicData[key][value].CODE;
				this.formData = formData;
				this.selectData = data;
			},
			uplaodFile(){
				this.$util.upload('_xgfj','PPP_T_BUS_ENTERPRISE_INFO.xgfj',(data)=>{
					if(data){
						this.newFileList=data
						this.FILELIST.push({
							...data[0],fileShowName:data[0].name
						})
					}
				})
			}
		},
		onLoad(options) {
			this.dataKey = options.dataKey;
			const dic = JSON.parse(uni.getStorageSync('dicData'))
			const data = {
				...this.dicData
			}
			data.ent_scale = JSON.parse(dic.ent_scale); //企业规模
			data.inve_field = JSON.parse(dic.inve_field); //行业类型
			data.dwxz = JSON.parse(dic.dwxz) //企业性质
			data.targetType = JSON.parse(dic.targetType) //企业类型
			this.dicData = data;
			this.getDetail();
		},
		onShow() {
			const self = this
			uni.$on("companyName", res => {
				console.log(res);
				// 清除监听
				self.formData.NAME = res.data
				uni.$off('companyName');
			})
			// uni.$on("person", res => {
			// 	console.log(res);
			// 	// 清除监听
			// 	this.personText = res.data.map(item => {
			// 		return item.text
			// 	})
			// 	const form = {
			// 		...this.formData
			// 	};
			// 	form.MANAGER = res.data.map(item => {
			// 		return item.value
			// 	}).join(',')
			// 	this.formData = form;
			// 	uni.$off('person');
			// })
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding-bottom: 60rpx;
	}



	.box-detail {
		background-color: #ffffff;
		border-radius: 20px;
		margin: 20rpx;
		padding: 26rpx 30rpx 50rpx 30rpx;
	}

	.picker {
		position: relative;
	}

	.picker-text {
		position: absolute;
		left: 10px;
		right: 30px;
		height: 36px;
		top: 0;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #333;
		background: #fff;
		z-index: 9;
		padding: 10 0 0 10px;
	}


	.box-detail-content {
		margin-top: 24rpx;

		&.border {
			border-bottom: 1px solid #e8f0f2;
		}
	}

	.box-detail-content-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.row-title {
			font-size: 26rpx;
			color: #9a9a9a;
			text-align: left;
			flex-shrink: 0;
			width: 120rpx;
			margin-right: 10rpx;

			&.mag {
				margin-left: 18rpx;
			}
		}

		.row-content {
			font-size: 26rpx;
			color: #414a5d;
			word-wrap: break-word;
			word-break: break-all;
			flex: 1;
			text-align: right;

			&.mag {
				margin-right: 18rpx;
			}
		}
	}

	.bar-contact {
		background-color: #0099cc;
		border-radius: 10px;
		height: 40rpx;
		line-height: 40rpx;
		padding-left: 18rpx;
		color: #FFFFFF;
		font-size: 24rpx;

	}

	.box-attach {
		margin-top: 20rpx;
	}

	.box-attach-row {
		display: flex;
		align-items: center;
		padding: 0 18rpx;
		height: 38rpx;
		margin-bottom: 10rpx;

		.box-attach-icon {
			width: 34rpx;
			margin-right: 30rpx;
		}

		.box-attach-name {
			word-wrap: break-word;
			word-break: break-all;
			white-space: pre-line;
			font-size: 26rpx;
			color: #0099cc;
		}
	}

	.uni-form-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.uni-input {
		border-bottom: 1px solid #dce4e6;
		flex: 1;
	}

	.title {
		width: 200rpx;
		flex-shrink: 0;
	}
</style>
